<template v-if="bye">
  <a-config-provider prefix-cls="ss" style="padding: 24px 24px 0; background: skyblue">
    <div class="smart-clip">
      <!-- 视频混剪头部 start -->
      <div class="smart-clip-header">
        <div class="smart-clip-header-title_top">视频混剪</div>
        <div class="smart-clip-header-desc">
          快速生成大规模的宣传视频，平台独有官方内容去重算法，助力视频效果提升
        </div>
        <div class="smart-clip-header-btngroup">
          <a-tooltip v-if="!clipRole.includes('sphj')" placement="topLeft">
            <template #title>
              <span>套餐不支持该权限</span>
            </template>
            <a-button type="primary" :disabled="!clipRole.includes('sphj')"
              style="border: none; border-radius: 6px; margin-right: 20px"><plus-outlined
                :style="{ fontSize: '12px' }" />创建混剪项目</a-button>
          </a-tooltip>
          <a-button v-if="clipRole.includes('sphj')" @click="addMontage" type="primary"
            style="border: none; border-radius: 6px; margin-right: 20px"><plus-outlined
              :style="{ fontSize: '12px' }" />创建混剪项目</a-button>


          <a-tooltip v-if="!clipRole.includes('sphj')" placement="topLeft">
            <template #title>
              <span>套餐不支持该权限</span>
            </template>
            <a-button :disabled="!clipRole.includes('sphj')" style="border-radius: 6px; border: none" type="default">
              <PlusOutlined :style="{ fontSize: '12px' }" />从脚本创建混剪项目
            </a-button>
          </a-tooltip>
          <a-button v-if="clipRole.includes('sphj')" @click="authoringScriptHandle('scriptMixedCreate')"
            style="border-radius: 6px; border: none" type="default">
            <PlusOutlined :style="{ fontSize: '12px' }" />从脚本创建混剪项目
          </a-button>
        </div>
      </div>
      <!-- 视频混剪头部 end -->

      <!-- content stert-->
      <div class="smart-clip-content">
        <div class="clip-content-search">
          <div class="smart-clip-header-title">混剪项目</div>
          <div class="smart-clip-content-serch">
            <div class="content-serch-item">
              <a-input placeholder="请输入混剪项目名" allowClear v-model:value="title" style="width: 100%">
                <template #prefix>
                  <SearchOutlined />
                </template>
              </a-input>
            </div>
            <div class="content-serch-item">
              <a-range-picker style="width: 100%" @change="onTimeChange" v-model:value="splitTime" />
            </div>
            <div class="content-serch-item">
              <a-button class="search-btn" type="dashed" @click="clearHandle" style="margin-right: 10px">清空</a-button>
              <a-button type="primary" class="search-btn" @click="searchHandle">搜索</a-button>
            </div>
          </div>
        </div>

        <a-spin :spinning="spinning" size="large">
          <!-- 混剪项目列表 --> 
          <div class="smart-clip-content-List" v-if="templateData.length>0">
            <div class="smart-clip-content-item" v-for="(item, index) in templateData" :key="index"
              @click="item.status === 1 ? () => { } : createOrCopy('view', item)">
              <!-- 置灰遮罩层 -->
              <a-popover>
                <template #content> 混剪项目剪辑中 </template>
                <div class="smart-clip-content-item-mask" v-if="item.status == 1"></div>
              </a-popover>

              <div class="smart-clip-content-itemInfo">
                <div class="smart-clip-content-itemInfo_lf">
                  <img :src="item.thumb_url ? item.thumb_url : item.cover" v-if="item.cover_type !== 'video'" alt=""
                    style="width: 100%; height: 100%" />

                  <template v-else-if="item.cover_type === 'video'">
                    <template v-if="item?.thumb_url">
                      <img :src="item.thumb_url" alt="" style="width: 100%; height: 100%" />
                    </template>
                    <template v-else>
                      <div style="width: 100%; height: 100%;  overflow: hidden;">
                      <img :src="default_corver"  style="width: 100%; height: 100%;   object-fit: cover; 
                            transform: scale(1.8); transform-origin: center; "  />
                      </div>
                         
                      <!-- <video :src="item.cover" style="width: 100%; height: 100%; background-color: black"></video> -->
                    </template>
                  </template>
                </div>
                <div class="smart-clip-content-itemInfo_rg">
                  <!-- 混剪名称 -->
                  <div class="itemInfo_rg-title">
                    <a-tooltip v-if="item.title.trim().length > 16">
                      <template #title>
                        <div style="max-width: 200px">
                          {{ item.title }}
                        </div>
                      </template>
                      {{ item.title.trim().substring(0, 16) + "..." }}
                    </a-tooltip>
                    <div v-else>
                      {{ item.title }}
                    </div>
                  </div>
                  <div class="itemInfo_rg-desc">
                    <!-- 创建时间 -->
                    <div class="info_rg_desc_item">
                      创建时间：
                      <a-tooltip>
                        <template #title v-if="item?.created_at?.trim().length > 10">{{ item.created_at }}</template>
                        {{ item.created_at }}
                      </a-tooltip>
                    </div>
                    <!-- 更新时间 -->
                    <div class="info_rg_desc_item">
                      更新时间：
                      <a-tooltip>
                        <template #title v-if="item.updated_at.trim().length > 10">{{ item.updated_at }}</template>
                        {{ item.updated_at }}
                      </a-tooltip>
                    </div>
                    <!-- 画面比例 -->
                    <div class="info_rg_desc_item">
                      <span v-if="item.size_config?.x_ratio_scale && item.size_config?.y_ratio_scale">
                        画面比例：{{ item.size_config.x_ratio_scale }} x
                        {{ item.size_config.y_ratio_scale }}
                      </span>
                      <span v-else>
                        画面比例：{{ item.size_config.width }} x
                        {{ item.size_config.height }}
                      </span>

                    </div>

                    <!-- 混剪id -- 可复制 -->
                    <div class="info_rg_desc_item mid_box" @click.stop="$utils.copyText(item.id)">
                      <a-tooltip>
                        <template #title>点击复制视频MID</template>
                        <span>
                          视频MID：{{ item.id }}
                        </span>
                      </a-tooltip>
                    </div>

                    <!-- 剪辑状态,剪辑中才显示 -->
                    <div class="info_rg_desc_item" v-if="item.status == 1">
                      <div class="info_rg_desc_item_status">
                        剪辑中：
                        <!-- 进度条 -->
                        <div class="progress_item">
                          <a-progress :percent="100" :showInfo="false" type="line" size="small" :stroke-color="{
                            '0%': '#108ee9',
                            '100%': '#87d068',
                          }" status="active" />
                        </div>
                      </div>
                    </div>
                    <!-- 视频预览状态,生成中才显示 -->
                    <div class="info_rg_desc_item" v-if="item.statusMixedCut == 2">
                      <div class="info_rg_desc_item_status" style="line-height:1.5">
                        当前状态：
                        <a-tag color="processing"
                          style="border-radius: 5px; font-size: 10px;line-height:1.5;padding-top:0;padding-bottom:0">
                          <template #icon>
                            <sync-outlined :spin="true" />
                          </template>
                          预览视频生成中
                        </a-tag>
                      </div>
                    </div>
                  </div>
                  <div class="info-rg-count">
                    <a-tooltip>
                      <template #title v-if="item.material_num >= 100">
                        素材数量：{{ item?.material_num }}</template>
                      <span> 素材数量：{{ item?.material_num }}</span>
                    </a-tooltip>
                    <a-tooltip>
                      <template #title v-if="item?.scene_name?.length >= 100">
                        镜头数量：{{ item?.scene_name?.length }}</template>
                      <span> 镜头数量：{{ item?.scene_name?.length }}</span>
                    </a-tooltip>
                  </div>
                </div>
              </div>
              <div class="smart-clip-content-btn">
                <div class="tag_box">
                  <a-tooltip v-if="!clipRole.includes('sphj')" placement="topLeft">
                    <template #title>
                      <span>套餐不支持该权限</span>
                    </template>
                    <a-tag class="tag_item" style="margin-right: 10px" @click.stop="createOrCopy('edit', item)"
                      v-if="item.button.edit == 1">编辑</a-tag>
                  </a-tooltip>

                  <!-- <a-tag class="tag_item" style="margin-right: 10px" @click.stop="goDetail(item.id)">剪辑信息</a-tag> -->
                  <a-tag v-if="item.button.copy == 1" class="tag_item"
                    @click.stop="createOrCopy('copy', item)">复制</a-tag>
                  <a-tag v-if="item.button.view_video == 1" class="tag_item"
                    @click.stop="viewFinishedFilm(item)">查看成片</a-tag>
                </div>
                <span class="del_btn" @click.stop="deleteItem(item.id, index)">删除</span>
              </div>
            </div>
          </div>
          <div class="empty" v-else>
            <a-empty />
          </div>

          <!-- 分页器 -->
          <!-- @showSizeChange="showSizeChange" -->
          <div class="smart_clip_content_pagination" v-if="templateData.length > 0">
            <a-pagination :total="total" v-model:current="page" v-model:pageSize="pageSize" show-less-items
              @change="PageChange" />
          </div>
        </a-spin>
      </div>
      <!-- content end -->
      <AuthoringScript ref="authoringScript" />
    </div>

    <!-- 充值弹窗 -->
    <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

  </a-config-provider>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  ref,
  createVNode,
  onMounted,
  watch,
} from "vue";
import {
  PlusOutlined,
  SearchOutlined,
  EllipsisOutlined,
  ExclamationCircleOutlined,
  SyncOutlined,
} from "@ant-design/icons-vue";
import utils from'@/common/utils/utils.js'

// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'

import { useRouter, useRoute } from "vue-router";
import AuthoringScript from "./modules/AuthoringScript.vue";
import { Modal, message, notification } from "ant-design-vue";
import moment from "moment";
// 工具和模拟数据
import { morkArrList } from "./modules/modules/templateData.js";
// 封装的请求
import request from "@/common/utils/request";
import store from "@/store/index.js";
import { onBeforeRouteLeave } from "vue-router";

export default defineComponent({
  name: "MixedCutIntroduction",
  components: {
    PlusOutlined,
    SearchOutlined,
    EllipsisOutlined,
    AuthoringScript,
    SyncOutlined,
    vipModal
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
const vipVisible = ref(false)
    const state = reactive({
      bye: true,
      title: "", //项目名称
      pageSize: 20, //当前页数
      total: null,
      page: 1, //页码
      spinning: true, //span加载
      authoringScript: null,
      statusList: [
        {
          value: "0",
          label: "待剪辑",
        },
        {
          value: "1",
          label: "剪辑中",
        },
        {
          value: "2",
          label: "完成",
        },
        {
          value: "4",
          label: "失败",
        },
      ],
      splitTime: [],
      start_time: "",
      end_time: "",
      default_corver:  utils.staticPath + "images/workAi/shotstack/default_corver.png",
    });


    const clipRole = computed(() => {
      console.log(store.state.user?.clipRole,'有咩有 sphj');
      
      return store.state.user?.clipRole
    })


    // 模板广场页面带过来的 id
    const queryId = computed(() => {
      return route.params.id;
    });
    const authoringScriptHandle = (type) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        vipVisible.value = true
      } else {
        state.authoringScript.showDrawer(type);
      }

    };
    // 查看详情
    const createOrCopy = (openType, item) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        vipVisible.value = true

      } else {
        if (!clipRole.value.includes('sphj')) {
          message.error('套餐不支持该权限')

        } else {
          if (openType == "view" && item.statusMixedCut == 2) {
            router.push({
              name: "MixedCutPreview",
              path: "/MixedCutPreview",
              query: {
                qid: item.id,
                id: item.id,
                key: "id",
                viewType: "2",
                name: item.title,
                back:'MixedCutIntroduction'
              },
            });
          } else {
            router.push({
              name: "mixedCutCreat",
              path: "/mixedCutCreat",
              query: {
                id: item.id,
                key: "id",
                viewType: "2",
                openType,
              },
            });
          }
        }

      }

    };

    // 删除某项
    const deleteItem = (id, index) => {
      Modal.confirm({
        title: "是否删除当前混剪项目?",
        icon: createVNode(ExclamationCircleOutlined),
        content: "删除后不影响已生成的混剪作品",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          request
            .del("/work_ai", "/user/shotstack/clip/delete", {
              editing_record_id: id,
              isDelSliceFolder: 0,
            })
            .then((res) => {
              if (res) {
                message.success("删除成功");
                if (templateData.value.length <= 1 && state.page > 1) {
                  state.page -= 1; // 向前翻一页
                }
                getTemplateList();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
      });
    };

    // 模板数据
    const templateData = ref([]);
    // 获取模板列表
    const getTemplateList = async () => {
      // debugger
      state.spinning = true;
      const res = await request
        .get("/work_ai", "/user/shotstack/editing/record/list", {
          title: state.title,
          pageSize: state.pageSize,
          page: state.page,
          start_time: state.start_time,
          end_time: state.end_time,
        })
        .then((res) => {
          templateData.value = res.result.data;
          state.total = res.result.total;
          state.spinning = false;
        })
        .catch((err) => {
          return err;
        })
        .finally(() => {
          state.spinning = false;
        });
    };
    const searchHandle = () => {
      state.page = 1;
      getTemplateList();
    };

    // 创建剪辑项目
    const addMontage = () => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        vipVisible.value = true

      } else {
        router.push({
          path: `/mixedCutCreat`,
          query: {
            type: 0,
            viewType: "2",
          },
        });
      }

    };

    onMounted(() => {
      getTemplateList();
    });
    // 分页change事件
    const PageChange = (page, pageSize) => {
      getTemplateList();
    };
    // 查看成片
    const viewFinishedFilm = (info) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        vipVisible.value = true

      } else {
        router.push({
          path: "/workShotstack/matrixMarketing/composeMaterial",
          query: {
            shotstack_task_id: info.button?.view_info?.shotstack_task_id,
          },
        });
      }


    };
    // 时间选则处理
    const onTimeChange = (e) => {
      if (state.splitTime) {
        state.start_time = moment(state.splitTime[0]).format("YYYY-MM-DD");
        state.end_time = moment(state.splitTime[1]).format("YYYY-MM-DD");
      } else {
        state.splitTime = [];
      }
    };
    watch(
      () => state.splitTime,
      (val) => {
        if (val.length === 0) {
          state.start_time = "";
          state.end_time = "";
          getTemplateList();
        }
      }
    );
    watch(
      () => state.title,
      (val) => {
        if (val == "") {
          getTemplateList();
        }
      }
    );
    // 清空搜索
    const clearHandle = () => {
      state.title = "";
      state.start_time = "";
      state.end_time = "";
      state.splitTime = [];
      state.page = 1;
      state.pageSize = 20;
      getTemplateList();
    };

    // 剪辑详情页面
    const goDetail = (id) => {
      router.push({
        name: "MixedCutIntroductionDetail",
        path: "/MixedCutIntroductionDetail",
        query: {
          id,
        },
      });
    };

    onBeforeRouteLeave((to, from, next) => {
      state.bye = false
      next(true)
    });
    return {
      ...toRefs(state),
      vipVisible,
      goDetail,
      authoringScriptHandle,
      // showSizeChange,
      deleteItem,
      createOrCopy,
      templateData,
      morkArrList,
      queryId,
      addMontage,
      PageChange,
      getTemplateList,
      viewFinishedFilm,
      searchHandle,
      onTimeChange,
      clearHandle,
      clipRole
    };
  },
});
</script>

<style lang="less" scoped>

@minw:0px;

.smart-clip {
  padding: 14px 14px 0;
}

.smart-clip-header {
  padding: 30px 30px 0;
  border-radius: 12px;
  height: 180px;
  min-width: @minw;
  // margin-top: 20px;
  background: linear-gradient(220deg, #f3f7ff, rgba(159, 191, 255, 0.4));
  display: flex;
  flex-direction: column;

  .smart-clip-header-title_top {
    font-size: 24px;
    color: #0c0d0e;
    line-height: 1.5;
  }

  .smart-clip-header-desc {
    font-size: 14px;
    color: #737a87;
    margin-top: 5px;
    line-height: 1.5;
  }

  .smart-clip-header-btngroup {
    margin-top: 15px;
  }
}

.smart-clip-content {
  margin-top: 24px;
  min-width: @minw;

  // padding: 10px 0 0 10px;
  // 分页
  .smart_clip_content_pagination {
    display: flex;
    margin-top: 30px;
    justify-content: flex-end;
  }

  // 搜索
  .clip-content-search {
    min-width: @minw;
    display: flex;

    .smart-clip-header-title {
      margin-right: 20px;
      font-size: 20px;
      color: #1c1f23;
      font-weight: 600;
    }

    .smart-clip-content-serch {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .content-serch-item {
        &:nth-child(1) {
          width: 20%;
        }

        &:nth-child(2) {
          width: 20%;
          margin: 0 10px;
        }
      }
    }

    .search-btn {
      border-radius: 5px;
    }
  }
}

// 混剪列表
.smart-clip-content-List {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
}
// 空状态
.empty {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.smart-clip-content-item {
  width: 100%;
  // min-width: 335px;
  height: 100%;
  border: 1px solid #eaedf1;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.3s;
  position: relative;

  &:hover {
    // border-color: #2878FF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  // 置灰遮罩
  .smart-clip-content-item-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: 10;
    cursor: not-allowed;
    border: 1px solid #eaedf1;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  }
}

.smart-clip-content-itemInfo {
  display: flex;
  padding: 10px;
  cursor: pointer;

  // height: 140px;
  .smart-clip-content-itemInfo_lf {
    height: 100%;
    border: 1px solid #eaedf1;
    width: 100px;
    min-width: 100px;
    margin-right: 3%;
    height: 140px;
    display: flex;
    align-items: center;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .smart-clip-content-itemInfo_rg {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 160px;
    padding-left: 5px;
    // overflow-y: hidden;
    overflow: hidden;

    .itemInfo_rg-title {
      font-size: 14px;
      margin-bottom: 4px;
      color: #0c0d0e;
      /* 溢出内容隐藏 */
      overflow: hidden;
      /* 文本溢出显示省略号 */
      text-overflow: ellipsis;
      /* 文本在一行显示 */
      white-space: nowrap;
    }

    .itemInfo_rg-desc {
      overflow-x: hidden;
      overflow-y: auto;
      padding-right: 4px;
      flex: 1;

      &:hover {
        &::-webkit-scrollbar {
          display: block;
        }

        padding-right: 0;
      }

      height: 100%;

      &::-webkit-scrollbar {
        width: 4px;
        /* 滚动条的宽度 */
        height: 10px;
        /* 滚动条的高度，垂直滚动条可能用得上 */
        display: none;
      }

      &::-webkit-scrollbar-thumb {
        background: #888;
        /* 滑块的背景颜色 */
        border-radius: 10px;
        /* 滑块的圆角 */
      }

      .info_rg_desc_item {
        color: #737a87;
        font-size: 11px;
        /* 溢出内容隐藏 */
        overflow-x: hidden;
        /* 文本溢出显示省略号 */
        text-overflow: ellipsis;
        /* 文本在一行显示 */
        white-space: nowrap;
        margin-top: 5px;

        // 剪辑状��
        .info_rg_desc_item_status {
          display: flex;

          .progress_item {
            width: 70%;
          }
        }
      }

      .mid_box{
        cursor: pointer;
        &:hover{
          transition: all .3s;
          color: var(--ss-primary-color-hover);
        }
      }
    }

    // 底部数量统计
    .info-rg-count {
      display: flex;
      // justify-content: space-between;
      font-size: 10px;
      align-items: center;
      font-weight: 500;

      span {
        color: #737a87;
        width: 70px;
        background: #eaedf1;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 5px;
        padding: 0 3px;
        overflow-x: hidden;
        text-align: center;
        margin-right: 10px;
      }
    }
  }
}

.smart-clip-content-btn {
  height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eaedf1;

  :deep(.ss-popover-title) {
    display: none;
  }

  .del_btn {
    cursor: pointer;
    display: inline-block;
    width: 50px;
    text-align: center;

    &:hover {
      color: #ff4d4f;
    }
  }

  .info-rg-more {
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 3px;
    overflow: hidden;

    &:hover {
      background-color: #f0f1f2;
    }
  }

  .tag_box {
    .tag_item {
      padding: 1px 12px;
      border-radius: 3px;
      cursor: pointer;

      &:hover {
        border-color: #2878ff;
      }
    }
  }
}
</style>
